<template>
	<view>
		<ren-calendar ref='ren' :headerBar='true' @onDayClick='onDayClick' :open="false"></ren-calendar>
		<!-- <view class="change">选中日期：{{curDate}}</view> -->
		
		<!-- 进行中 计划展开收起 按钮 -->
		<view class="plan_status" @click="isUnderwayShow = !isUnderwayShow">
			<text>进行中</text>
			<image :src="isUnderwayShow ? require('@/static/index/index/unfold.png') : require('@/static/index/index/fold.png')"></image>
		</view>
		
		<!-- 进行中 计划展示列表 -->
		<view class="plan_item" v-for="item in underwayList" v-show="isUnderwayShow" 
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<view class="plan_ddl">
				<view :style="{color: isPlanExpired(item.deadline) ? '#E24844': '#617FDE'}">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
		
		<!-- 已完成 计划展开收起 按钮 -->
		<view class="plan_status" @click="isCompleteShow = !isCompleteShow">
			<text>已完成</text>
			<image :src="isCompleteShow ? require('@/static/index/index/unfold.png') : require('@/static/index/index/fold.png')"></image>
		</view>
		
		<!-- 已完成 计划展示列表 -->
		<view class="plan_item plan_complete_status" v-for="item in completeList" v-show="isCompleteShow"
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<view class="plan_ddl">
				<view style="color: #000000">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import { isPlanExpired, getNowDateStr, isDuringDate } from '@/utils/planDateHandle.js'

	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				curDate: '',
				
				
				// 计划列表部分开始
				isUnderwayShow: true,		// 进行中列表展示状态
				isCompleteShow: true,		// 已完成列表展示状态
				
				underwayList: [],			// 进行中的计划列表
				completeList: [],			// 已完成的计划列表
			
				totalPlanList: [],			// 接口获取的所有计划
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getPlanList()
		},
		watch: {
			curDate: function(val) {
				// console.log(this.totalPlanList)
				// 处理选中日期的 计划显示数组
				let planDurList = []
				
				planDurList = this.totalPlanList.filter(item => this.isDuringDate(item.createdAt.split(' ')[0], item.deadline.split(' ')[0], this.curDate))
				
				this.underwayList = planDurList.filter(item => item.progress !== 100)
				this.completeList = planDurList.filter(item => item.progress === 100)
				
			},
		},
		onReady() {

		},
		methods: {
			// 判断计划是否过期
			isPlanExpired,	
			getNowDateStr,
			isDuringDate,
			// 获取全部计划列表
			getPlanList() {
				
				this.$http_json({
					url: "/api/plan/list",
					method: "get",
					loading: false,
					params: {
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					console.log(result)
					this.totalPlanList = result.data
					this.curDate = this.getNowDateStr()
					
				})
				
			},
			// 日历点击事件
			onDayClick(data) {
				this.curDate = data.date;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.plan_status {
		background-color: #E7ECFD;
		color: #71737B;
		font-size: 24rpx;
		padding: 14rpx 30rpx;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.plan_item {
		border-bottom: 2rpx solid #F1F1F1;
		padding: 0 30rpx;
		
		.plan_title {
			font-size: 30rpx;
			font-weight: bold;
			padding-top: 19rpx;
		}
		
		.plan_ddl {
			padding: 14rpx 0;
			color: #617FDE;
			font-size: 24rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.duration {
				background-color: #617FDE;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.plan_complete_status {
		opacity: 0.3;
	}
	
</style>
